<%@page import="com.ita.pojo.MUser"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Activity</title>
<style type="text/css">
span {
	margin: 10px 10px;
}
</style>

</head>
<body>
	<jsp:include page="../../common/bar.jsp"></jsp:include>
	<div class="container-fluid">
		<div class="row"></div>
		<div class="col-sm-1 col-md-1 sidebar">
			<ul id="activity-nav" class="nav nav-sidebar">
				<li action="curr_activity" class="active"><a data-toggle="tab">Current Activity<span class="sr-only">(current)</span></a></li>

				<li action="record"><a href="#myassess"
					data-toggle="tab">Record</span>
				</a></li>
			</ul>
		</div>

		<div id="curr_activity_area" class="col-sm-10 col-sm-offset-2 col-md-11 col-md-offset-1 main tab-pane active" >
			<div class="jumbotron">
				<h1>Advertisement Attract investment</h1>
	
				<ul id="on_going" class="list-group" style="display: none;">
					<li class="list-group-item">
						<p>
							<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
							Activity Name : <span id="activity_name"></span>
						</p>
					</li>
					<li class="list-group-item">
						<p>
							<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
							Description : <span id="activitiy_desc"></span>
						</p>
					</li>
					<li class="list-group-item">
						<p>
							<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
							Valid Until : <span id="activity_valid"></span>
						</p>
					</li>
					<li class="list-group-item">
						<p>
							<span class="glyphicon glyphicon-time" aria-hidden="true">
								Start : <span id="activity_start"></span>
						</p>
					</li>
					<li class="list-group-item">
						<p>
							<span class="glyphicon glyphicon-time" aria-hidden="true">
								End : <span id="activity_end"></span>
						</p>
					</li>
					<li id="state" class="list-group-item" style="display:none;">
						<p>
							<span class="glyphicon glyphicon-eye-open" aria-hidden="true">
								State : <span id="activity_state"></span>
						</p>
					</li>
					<li id="amount" class="list-group-item" style="display:none;">
						<p>
							<span class="glyphicon glyphicon-usd" aria-hidden="true">
								Amount : <span id="activity_amount"></span>
						</p>
					</li>
					<li class="list-group-item">
						<p style="text-align: center;">
							<button id="btn-add" class="btn btn-success" data-toggle="modal"
								data-target=".bs-example-modal-sm" style="width: 30%;">Join
								Activity</button>
						</p>
					</li>
					<li class="list-group-item" id="hasJoin" style="display:none;">
						<p style="text-align: center;">
							You have to take part in the activities.
						</p>
					</li>
				</ul>
	
				<!-- No Activity -->
				<ul id="no_activitiy" class="list-group">
					<li class="list-group-item">
						<p>
							<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
							<span>No Activity is ongoing</span>
						</p>
					</li>
				</ul>
			</div>
		</div>
		
		<div id="my_record_area" class="col-sm-10 col-sm-offset-2 col-md-11 col-md-offset-1 main tab-pane active" style="display:none;">
			<h2>Join Record</h2>
			<div class="table-responsive">
			  <table class="table">
			    	<thead>
			    		<tr>
			    			<th>Activity ID</<th>
			    			<th>Activity Name</<th>
				    		<th>Description</<th>
				    		<th>Amount</th>
				    		<th>State</th>
				    		<th>Join Time</th>
			    		</tr>
			    	</thead>
			    	<tbody id="record-body">
			    		
			    	</tbody>
			  </table>
			</div>
		</div>
	</div>
	
	<!-- Modal -->
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Join Activity</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="amount">Amount :</label> <input type="number"
							class="form-control" id="modal-amount" placeholder="Offer a price">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button id="btn-join" type="button" class="btn btn-success">Join</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var ongoing = false;
		var activity;
		var tenderRecord;
		var mid;
		$(function() {
			//侧边栏
			$("#activity-nav").children("li").click(function(){
				var action = $(this).attr("action");
				if(action == "record"){
					$("#my_record_area").show();
					$("#curr_activity_area").hide();
				}else if(action == "curr_activity"){
					$("#my_record_area").hide();
					$("#curr_activity_area").show();
				}
			});
			
			
			checkCurrActivity();
			initRecord();
			//检查是否有活动
			function checkCurrActivity() {
				$.get("http://10.222.29.179:8090/aeat_ssh/api/activity/now",
						function(obj) {
							if (obj.code == 200) {//有活动
								if (obj.data != null) {
									ongoing = true;
									activity = obj.data;
									mid = $("#mid").val();
									//检查DB该商户是否参加活动，参加了显示#no_activitiy ，反之显示#on_going
									$.get("/meat/sec/activity/check?mid="+mid+"&activityId="+activity.id,function(data){
										if(data.code == 200){
											tenderRecord = data.data;
											init(ongoing);
										}
									});
								}
							}
						});
			}

			function init(ongoing) {
				if (ongoing) {
					$("#on_going").show();
					$("#no_activitiy").hide();
					initData();
					if(tenderRecord){
						var stateStr = "";
						$("#hasJoin").show();
						$("#btn-add").attr("disabled","disabled");
						if(tenderRecord.state==0){
							stateStr = "Untreaded";
						}else if(tenderRecord.state == 1){
							stateStr = "Pass";
						}else if(tenderRecord.state == 2){
							stateStr = "Expire";
						}
						$("#activity_state").html(stateStr);
						$("#state").show();
						$("#activity_amount").html(tenderRecord.amount);
						$("#amount").show();
					}
					//绑定按钮事件
					$("#btn-join").click(function() {
						var amount = $("#modal-amount").val();
						if (amount != null) {
						$.post("http://10.222.29.179:8090/aeat_ssh/api/activity/join",
								{
									"activity_id" : activity.id,
									"m_id" : mid,
									"amount" : amount
								},
								function(data) {
									if(data.code == 200){
										$.post("/meat/sec/activity/join",{"activity_id" : activity.id, "amount" : amount ,"activity_name":activity.name,"activity_desc":activity.description},function(data){
											if(data.code==200){
												window.location.reload();
											}
										});
									}
								});
						} else {
							alert("Amount cannot be null.")
						}
					});
				} else {
					$("#no_activitiy").show();
					$("#on_going").hide();
				}
			}

			function initData() {
				$("#activity_name").html(activity.name);
				$("#activitiy_desc").html(activity.description);
				$("#activity_valid").html(formatDate(activity.validity));
				$("#activity_start").html(formatDate(activity.start_time));
				$("#activity_end").html(formatDate(activity.end_time));
			}
			
			function initRecord(){
				$.get("/meat/sec/activity/record",function(obj){
					if(obj.code==200){
						obj.data.forEach(function(item){
							if(item.state==0){
								item.state="Untreaded";
							}else if(item.state==1){
								item.state="Pass";
							}else if(item.state==2){
								item.state="Refuse";
							}else if(item.state==3){
								item.state="Expire";
							}
							var str="<tr>"+
										"<td>"+item.activity_id+"</td>"+
						    			"<td>"+item.activity_name+"</td>"+
						    			"<td>"+item.activity_desc+"</td>"+
						    			"<td>"+item.amount+"</td>"+
						    			"<td>"+item.state+"</td>"+
						    			"<td>"+formatDate(item.create_time)+"</td>"+
					    			"</tr>";
					    	$("#record-body").append(str);
						});
					}
				});
			}

			function formatDate(time) {
				var now = new Date(time);
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				if (month < 10)
					month = "0" + month;
				var date = now.getDate();
				if (date < 10)
					date = "0" + date;
				var hour = now.getHours();
				var hourStr = "";
				(hour < 10) ? hourStr = "0" + hour : hourStr = "" + hour
				var minute = now.getMinutes();
				var minuteStr = "";
				(minute < 10) ? minuteStr = "0" + minute : minuteStr = ""
						+ minute;
				var second = now.getSeconds();
				var secondStr = "";
				(second < 10) ? secondStr = "0" + second : secondStr = ""
						+ second;
				return year + "-" + month + "-" + date + " " + hourStr + ":"
						+ minuteStr + ":" + secondStr;
			}
		});
	</script>
</body>
</html>